<style lang="scss" scoped>
	.puser {
		height: 100%;
		@include n-col1;
		align-items: stretch;
		padding-top: 20px;

		.n-page-h1 {
			gap: 20px;
			position: relative;

			.n-page-tabs {
				@include n-center;
			}
		}

		.puser-main {
			height: 0;
			margin-top: 20px;
			flex: 1;

		}

		.puser-list {
			color: $theme-text3;
			font-size: 16px;

			>li {
				background: $theme-bg-white1;
				height: 100px;
				gap: 20px;
				padding: 0 30px;
				@include n-row1;
				border-radius: 20px;

				&+li {
					margin-top: 30px;
				}
			}

			.puser-list-avatar {
				width: 25%;
				@include n-row1;
				gap: 15px;

				>img {
					width: 50px;
					height: 50px;
					object-fit: cover;
					border-radius: 50%;
				}

				>article {
					flex: 1;
					width: 0;

					>h3 {
						line-height: 1;
						font-size: 18px;
					}

					>p {
						line-height: 1;
						color: $theme-text5;
						margin-top: 10px;
					}
				}
			}

			.puser-list-item {
				flex: 1;
				width: 0;
				@include n-col2;
				align-items: stretch;

				>p {
					line-height: 1;
					color: $theme-text5;
				}

				>h3 {
					margin-top: 10px;
					line-height: 1;
					@include n-row1;
					gap: 20px;
				}
			}

			.n-page-iconBtn {
				background: $theme-bg-white4;
			}
		}


		.puser-card {
			color: $theme-text3;
			font-size: 16px;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(320px, auto));
			grid-auto-rows: max-content;
			gap: 30px;

			>li {
				min-width: 0;
				min-height: 0;
				padding: 12px;
				background: $theme-bg-white1;
				border-radius: 30px;

				>header {
					background: #f4f9fd;
					@include n-col2;
					height: 180px;
					border-radius: 25px;
					align-items: center;

					>img {
						width: 60px;
						height: 60px;
						object-fit: cover;
						border-radius: 50%;
						margin-bottom: 10px;
					}

					>h3 {
						line-height: 1;
						font-size: 14px;
						margin-bottom: 7px;
					}
				}

				>ul {
					@include n-row2;
					height: 100px;
					align-items: stretch;

					>li {
						flex: 1;
						width: 0;
						@include n-col2;
						align-items: center;
						font-size: 14px;
						text-align: center;

						>h3 {
							line-height: 1;
							font-size: 25px;
						}

						>p {
							line-height: 1;
							font-size: 14px;
							color: $theme-text5;
							margin-top: 14px;
						}
					}
				}
			}

		}


	}
</style>

<template>


  <div class="n-page puser" v-loading="loading">
    <!--    <p class="n-page-back"><span><i class="el-icon-back"></i>返回</span></p>-->
    <h1 class="n-page-h1">
      <em>用户({{ list.length }})</em>
      <ul class="n-page-tabs" v-show="userType==1">
        <li v-for="item in opts.type" :class="{'n-page-tabs-cur': params.type === item.value}"
            @click=" getData(params.type = item.value)">{{ item.label }}
        </li>
      </ul>
<!--      <i class="n-page-iconBtn el-icon-edit-outline"></i>-->
      <el-button icon="el-icon-plus" type="primary" @click="add">添加用户</el-button>
    </h1>
    <div class="puser-main">
      <ul class="puser-list" v-show="params.type !== 4">
        <li v-for="item,idx in list" :key="idx">
          <div class="puser-list-avatar">
            <img src="@/assets/img/9.png"/>
            <article>
              <h3>{{ item.username }}</h3>
              <p>{{ item.permission_points }}</p>
            </article>
          </div>
          <!--					<div class="puser-list-item">-->
          <!--						<p>内容关键字</p>-->
          <!--						<h3>哪里@多少@位置@在哪@电话@店</h3>-->
          <!--					</div>-->
          <div class="puser-list-item">
            <p>总数据量</p>
            <h3>{{item.length}}</h3>
          </div>

          <div class="puser-list-item">
            <p>代理商</p>
            <h3>{{item.agent_name}}</h3>
          </div>
          <div class="puser-list-item">
            <p>付费会员</p>
            <h3>
              <i class="n-page-tag" v-show="params.type !== 3">否</i>
              <i class="n-page-tag" v-show="params.type == 3">是</i>
            </h3>
          </div>

          <el-dropdown>
            <i class="n-page-iconBtn el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </li>
      </ul>

      <ul class="puser-card" v-show="params.type === 4">
        <li v-for="item,idx in list" :key="idx">
          <header class="puser-card-avatar">
            <img src="@/assets/img/9.png"/>
            <h3>{{ item.username }}</h3>
            <h3>{{ item.permission_points }}</h3>
            <i class="n-page-tag">中级</i>
          </header>

<!--          <ul class="puser-card-dash">-->
<!--            <li><h3>10</h3>-->
<!--              <p>推广<br/>用户数</p></li>-->
<!--            <li><h3>3</h3>-->
<!--              <p>注册<br/>会员数</p></li>-->
<!--            <li><h3>2</h3>-->
<!--              <p>付费<br/>用户数</p></li>-->
<!--          </ul>-->

        </li>
      </ul>


    </div>


    <n-handle class="n-page-dialog" :conf="handleConf.props" ref="handle" :compList="handleConf.compList"
              :btns="handleConf.btns" @ok="handle" :form="handleConf.form">

      <template #img><img style="width: 100%;" src="@/assets/img/7.png"/></template>
    </n-handle>


  </div>
</template>

<script>

import store from "@/utils/store";

export default {
  data() {
    return {
      userType : 0,
      loading: false,
      opts: {
        type: [
          {label: '用户', value: null},
          {label: '代理商', value: 4},
        ]
      },
      list: [],
      params: {
        username: 'root',
        type: null,
        _total: 0,
        agent:null
      },
      handleConf: {
        props: {title: '添加用户', type: 'dialog', size: '600px'},
        form: {
          username: '',
          password: '',
          type:"3"
        },
        compList: [
          {type: 'slot', slotName: 'img'},
          {
            type: 'select', label: '账号类型', show:false, required: true, k: 'type', options: [
              {label: "代理商", value: "4"},
              {label: "付费用户", value: "3"}],
            showFunc: ()=> (this.$store.userInfo || {}).type === 1,
          },
          {type: 'text', label: '账号', required: true, k: 'username'},

          {type: 'text', label: '密码', required: true, k: 'password'},
        ],
        btns: [
          {label: '确定添加', props: {type: 'primary'}, evKey: 'ok'},
        ],
      },


    }
  },
  mounted() {
    this.userType =  store.userInfo.type
    if(store.userInfo && store.userInfo.type ==4){
      this.params.agent=store.userInfo.user_id
    }
    this.getData();
  },
  methods: {
    async getData() {
      this.list = []
      const res = await this._req(this.$api.user.getUser(this.$base.params.clearEmpty(this.params)));
      if (!res) return;
      this.list = res.data;
    },
    add() {
      const {handleConf} = this;

      handleConf.form = {
        username: '',
        password: '',
      }
      handleConf.props.show = true;
    },
    // 新增或者编辑提交
    async handle(opt) {
      const {handleConf: {props, form}} = this;
      // if (!this.$refs.handle.verif()) return;
      // console.log('111'+this.userType)
      if(this.userType==4){
        this.$msg('网络拥挤，请您稍后再试！',2);
        return;
      }else{
        const res = await this._req(this.$api.user.createUser(form), props);
        if (!res) return;
        this.$msg();
        this.getData();
        props.show = false;
      }

    },


  }
}

</script>
